<template>
  <!-- 中间地图模块 -->
  <div class="map_box">
    <!-- 中国地图 -->
    <div
      id="china-map"
      class="map"
      style="width: 1300px;
             height: 650px;"
    />
  </div>
</template>

<script>
import { EventBus } from '../../../utils/eventbus' // 引入事件中心
import router from '@/router'
export default {
  name: 'QsgSystemMap',

  data() {
    return {
      Lableres1: [
        {
          name: '数据加载中',
          coords: [
            [120.19, 30.26],
            [102.7129, 38.166]
          ], // 线条位置[开始位置，结束位置]
          value: ['粮食作物']
        }
      ],
      Lableres2: []
    }
  },

  mounted() {
    EventBus.$on('addition', param => {
      this.Lableres2 = param.data
      this.china_map(this.Lableres2)
    })
    // 中国地图
    this.china_map(this.Lableres1)
  },

  methods: {
    // 中国地图
    china_map(data) {
      const mapChart = this.$echarts.init(document.getElementById('china-map')) // 图表初始化，china-map是绑定的元素
      window.onresize = mapChart.resize // 如果容器变大小，自适应从新构图
      const series = [] // 存放循环配置项
      let res = [] // 存放射线的起始点和结束点位置
      res = data
      // console.log(data)
      const province = [] // 存放有射线的省的名字，以此来拿到对应省份的坐标
      // 提前存好的所有省份坐标，用于后面根据名字拿到对应的左边
      const chinaGeoCoordMap = {
        新疆: [86.9023, 41.148],
        西藏: [87.8695, 31.6846],
        内蒙古: [110.5977, 41.3408],
        青海: [95.2402, 35.4199],
        四川: [102.9199, 30.1904],
        黑龙江: [128.1445, 46.7156],
        甘肃: [102.7129, 38.166],
        云南: [101.0652, 24.6807],
        广西: [108.7813, 23.6426],
        湖南: [111.5332, 27.3779],
        陕西: [108.5996, 33.7396],
        广东: [113.8668, 22.8076],
        吉林: [126.1746, 43.5938],
        河北: [115.4004, 38.1688],
        湖北: [112.2363, 30.8572],
        贵州: [106.6113, 26.6385],
        山东: [118.2402, 36.2307],
        江西: [115.7156, 27.99],
        河南: [113.0668, 33.8818],
        辽宁: [123.0438, 41.0889],
        山西: [112.4121, 36.6611],
        安徽: [117.2461, 31.0361],
        福建: [118.3008, 25.9277],
        浙江: [120.498, 29.0918],
        江苏: [119.8586, 32.915],
        重庆: [107.7539, 29.8904],
        宁夏: [105.9961, 37.1096],
        海南: [109.9512, 19.2041],
        台湾: [120.8254, 23.5986],
        北京: [116.4551, 40.2539],
        天津: [117.4219, 39.4189],
        上海: [121.4648, 31.2891],
        香港: [114.6178, 22.3242],
        澳门: [113.5547, 21.6484]
      }
      const index_data = new Set(province) // 把省的名字去重
      const data_res = [] // 定义一个新的变量存放省的坐标

      // 注意这里一定要用name和value的形式。不是这个格式的散点图显示不出来
      index_data.forEach((item) => {
        data_res.push({
          name: item, // 每个省的名字
          value: chinaGeoCoordMap[item] // 每个省的坐标
        })
      })

      // 循环往series内添加配置项
      series.push(

        // 点击高亮
        {
          type: 'map',
          mapType: 'china',
          zlevel: 1,
          roam: true,
          geoIndex: 0,
          tooltip: {
            show: true
          },
          itemStyle: {
            areaColor: '#00196d',
            borderColor: '#0a53e9'
          },
          emphasis: {
            show: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              areaColor: '#00196d',
              borderColor: '#0a53e9'
            }
          }
        },
        // 射线和标签
        {
          type: 'lines',
          zlevel: 3,
          // symbol: 'circle',
          // 到达点样式
          symbolSize: [5, 5],
          color: '#ff8003',
          opacity: 1,
          label: {
            show: true,
            padding: [3, 8],
            color: '#fff',
            backgroundColor: '#1a396180',
            // borderColor: '#aee9fb',
            // 边框颜色
            borderWidth: 1,
            borderRadius: 6,
            formatter(params) {
              const arr = [params.name]
              return arr.join('\n')
            },
            textStyle: {
              align: '',
              lineHeight: 20,
              fontSize: 18 // 设置标签字体大小为12px
            }

          },
          lineStyle: {
            type: 'solid',
            // color: '#d70106',
            color: '#fff',
            curveness: 0.15, // 线条曲度
            width: 1,
            opacity: 0.9
          },
          data: res
        }
      )
      // 配置
      const option = {
        animationDuration: 4000, // 线条渲染速度1000 === 1s
        legend: {
          show: true,
          selected: {},
          x: 'left',
          orient: 'vertical',
          textStyle: {
            color: 'white'
          },
          data: []
        },
        // 鼠标移上去的弹框
        // tooltip: {
        //   trigger: 'item',
        //   show: true
        // },

        // geo：这是重点
        geo: {
          map: 'china', // 中国地图
          zoom: 1.2, // 缩放倍数
          roam: false, // 是否允许缩放和拖拽地图
          label: {
            normal: {
              show: true, // 是否显示省份名字，现在是隐藏的状态，因为和散点图的名字重叠了。如果需要就true
              textStyle: {
                // 名字的样式
                color: '#fff'
              }
            },
            emphasis: {
              show: true
            }
          },
          // 地图样式
          itemStyle: {
            normal: {
              borderColor: '#293171', // 地图边框颜色
              borderWidth: '2', // 地图边框粗细
              areaColor: '#0A0F33' // 地图背景色
              // borderColor: '#089bab', // 地图边框颜色
              // borderWidth: '2', // 地图边框粗细
              // areaColor: '#b8d3cc' // 地图背景色
            },
            // 省份地图阴影
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: '#fff'
            }
          }

        },

        series: series // 图表配置

      }

      mapChart.setOption(option, true) // 生成图表

      // 地图点击事件
      mapChart.on('click', function(params) {
        console.log(params)
        // router.push(`/meilin/${params.data.id}`)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.map_box {
  width: 100%;
  height: 100%;
  position: relative;
}
  .map {
    position: absolute;
    left: -19%;
    top: 8%;
  }
</style>
